<template>
  <div class="about">
    <p>年龄大于20的学生：</p>
    <ul>
      <li v-for="student in students"
          :key="student.id">{{student}}</li>
      <!-- <li>{{$store.state.students | getStudentsThan20}}</li> -->
    </ul>
    <ul>
      <li v-for="student in $store.getters.studentsThan20"
          :key="student.id">{{student}}</li>
      <!-- <li>{{$store.state.students | getStudentsThan20}}</li> -->
    </ul>
    <p>length:{{ $store.getters.studentsThan20Len}}</p>
    <p>id:100-->{{$store.getters.studentGettedById(100)}}</p>
  </div>
</template>

<script>
export default {
  name: 'About',
  components: {

  },
  data () {
    return {

    };
  },
  filters: {
    // 处理函数
    getStudentsThan20 (students) {
      return students.filter((student) => {
        return student.age > 20
      })
    }
  },
  computed: {
    students () {
      return this.$store.state.students.filter(student => {
        return student.age > 20
      }).sort((x, y) => {
        return x.id - y.id
      })
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {

  },
};
</script>

<style scoped>
</style>
